<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客登录页面</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blog_login.css">
</head>
<body>
        <!-- 导航栏 -->
        <div class="nav">
            <img src="image/tiger.png" >
            <span>用户未登录</span>
            <a href="user_register.html">作者注册</a>
        </div>
        <!-- 登录页面 -->
        <div class="login-container">
            <div class="login">
                <div class="title">登录</div>
                    <div class="user">
                        <span>用户名:</span>
                        <input type="text" placeholder="游客007(游客账号用户名)" id="U">
                    </div>
                    <div class="user">
                        <span>密码:</span>
                        <input type="password" placeholder="9527(游客账号密码)" id="P">
                    </div>
                    <div class="one">
                        <input type="submit" value="登录">
                    </div>
            </div>
        </div>

        <script src="js/jquery.min.js"></script>

        <script>
            // 判断是否登录逻辑(登录后就将用户名显示在左上角)
            function getUserInfo(){
                jQuery.ajax({
                    type:'get',
                    url:'login',
                    success:function(body){
                        //判断body中对象的 userId = 0
                        if(body.username && body.userId > 0){
                            console.log("用户已登录,用户:"+body.username);
                            let userShow = document.querySelector(".nav>span");
                            userShow.innerHTML = "";
                            userShow.innerHTML = body.username;
                        }
                    },
                });
            };

            //登录按钮的点击事件函数
            function blogLogin(){
                let sub = document.querySelector(".one>input");
                sub.onclick = function(){
                    //拿到 用户名 和 密码 里的输入框的值
                    let username = document.querySelector(".user>#U");
                    let password = document.querySelector(".user>#P");
                    //检查用户名是否为空
                    if(username.value.trim() === ""){
                        alert("请输入用户名!");
                        username.focus();
                        return;
                    }
                    //检查密码是否为空
                    if(password.value.trim() === ""){
                        alert("请输入密码!");
                        password.focus();
                        return;
                    }

                    //发送用户登录的请求给后端
                    jQuery.ajax({
                        type: "post",
                        url: "login",
                        data: {
                            "username":username.value,
                            "password":password.value
                        },
                        success: function(body){
                            //检测是否登录成功
                            console.log(body);
                            if(body.result === "success"){
                                //重定向到 blog_list.html 页面
                                location.assign('blog_list.html');
                                return;
                            }else{
                                console.log(body.result);
                                alert(body.result);
                                //鼠标聚焦于用户名
                                username.focus();
                                return;
                            }
                        },
                        error: function(body){
                            console.log("登录失败！"+body);
                        }
                    });
                }
            }

            getUserInfo();
            blogLogin();
        </script>
</body>
</html>